<template>
  <div class="page-wrap1">
    <Head title="基础信息" isBack>
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm"
          :detail="data.detailData"
          align="left"
        ></Detail>
        <div class="qc-detail-wrap" style="margin-bottom: 0px">
          <div
            class="item-wrap item-left"
            :style="`width: calc(100% - 120px);`"
          >
            <div class="label" style="width: 72px; line-height: 32px">
              执行目标
            </div>
            <div class="info" style="margin-top: 10px">
              <el-radio-group
                v-model="data.detailData.targetType"
                v-for="(item, index) in targetTypeData"
                disabled
                :key="index"
              >
                <el-radio :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div
            class="item-wrap item-left"
            :style="`width: calc(100% - 120px);`"
            v-if="
              data.detailData.targetType == '1' ||
              data.detailData.targetType == '0'
            "
          >
            <div class="label" style="width: 72px; line-height: 32px"></div>
            <div class="info">
              <QcTree
                ref="companyTree"
                :data="optionsS.treeData"
                :showCheckbox="false"
              ></QcTree>
            </div>
          </div>
          <div
            class="item-wrap item-left"
            :style="`width: calc(100% - 120px);`"
            v-if="data.detailData.targetType == '2'"
          >
            <div class="label" style="width: 72px; line-height: 32px"></div>
            <div class="info">
              <el-input
                v-model.trim="data.detailData.targetIds"
                placeholder="请输入用户账号"
                type="textarea"
                disabled
              />
            </div>
          </div>
        </div>
      </template>
    </Head>
    <Head title="执行模式">
      <template #content>
        <Detail
          v-if="data.detailData.executeType == 0"
          :columns="1"
          :form="detailForm3"
          :detail="data.detailData"
          align="left"
        ></Detail>
        <Detail
          v-else
          :columns="1"
          :form="data.detailData.executeType == 1 ? detailForm1 : detailForm2"
          :detail="data.detailData"
          align="left"
        ></Detail>
      </template>
    </Head>
    <div class="edit-wrap">
      <Head title="执行记录">
        <template #content>
          <Table
            ref="tableRef"
            :columns="data.columns"
            :toolbar="data.toolbar"
            :query="data.query"
            @get-list="getData"
          ></Table>
        </template>
      </Head>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import Table from '@/components/table/index.vue';
import QcTree from '@/components/qcTree/index.vue';
import {
  subsidyTaskGetById,
  pagingExecuteRecord,
  EXPORT_EXECUTERECORD,
} from '@/service/apis/user';
import { TASK_TYPE, EXECUTE_TYPE, WEEK } from '@/utils/dictionaries';
import { exportFile } from '@/utils/utils';

const route = useRoute();
const {
  query: { id },
} = route;

let optionsS = reactive({
  treeData: [] as any,
});

const tableRef = ref();

const detailForm = reactive([
  {
    label: '任务名称',
    prop: 'name',
  },
  {
    label: '任务支付钱包',
    prop: 'originalAccountName',
  },
  {
    label: '任务模式',
    prop: 'taskType',
    dic: TASK_TYPE,
  },
  {
    label: '金额',
    prop: 'amount',
    unit: '元',
  },
]);

const detailForm1 = reactive([
  {
    label: '选择模式',
    prop: 'executeType',
    dic: EXECUTE_TYPE,
  },
  {
    label: '发放时间',
    prop: 'nextTime',
  },
]);
const detailForm2 = reactive([
  {
    label: '选择模式',
    prop: 'executeType',
    dic: EXECUTE_TYPE,
  },
  {
    label: '总发放次数',
    prop: 'totalCount',
  },
  {
    label: '发放时间',
    prop: 'executePeriod',
    template: (row: any) => {
      if (row.executePeriod == 0) {
        return `每日执行/${row.executeTime}`;
      } else if (row.executePeriod == 1) {
        const executeWeek = WEEK.find((item: any) => {
          if (item.value == row.executeWeek) {
            console.log(item.label);
            return item;
          }
        });
        return `每周执行/${executeWeek?.label}/ ${row.executeTime}`;
      } else if (row.executePeriod == 2) {
        return `每月执行/${row.executeDate}日/ ${row.executeTime}`;
      } else {
        return '--';
      }
    },
  },
]);

const detailForm3 = reactive([
  {
    label: '选择模式',
    prop: 'executeType',
    dic: EXECUTE_TYPE,
  },
]);

let targetTypeData = reactive([] as any);
targetTypeData = [
  {
    value: '0',
    label: '选择企业',
  },
  {
    value: '1',
    label: '选择标签',
  },
  {
    value: '2',
    label: '选择单用户',
  },
];

const data = reactive({
  detailData: {} as any,
  columns: [
    {
      label: '归属企业',
      prop: 'orgName',
    },
    {
      label: '用户账号',
      prop: 'accountNumber',
    },
    {
      label: '用户名称',
      prop: 'accountName',
    },
    {
      label: '手机号',
      prop: 'mobile',
    },
    {
      label: '金额',
      prop: 'amount',
    },
    {
      label: '执行时间',
      prop: 'createTime',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'subsidyManagementList.export',
      icon: 'icon-export',
      type: 'primary',
      handle: (row: any) => {
        exportFile(
          EXPORT_EXECUTERECORD,
          '补贴任务执行记录',
          tableRef.value?.getForm()
        );
      },
    },
  ],
  query: [
    {
      label: '归属企业',
      prop: 'orgName',
      comName: 'input',
      props: {
        placeholder: '请输入归属企业',
      },
    },
    {
      label: '用户账号',
      prop: 'accountNumber',
      comName: 'input',
      props: {
        placeholder: '请输入用户账号',
      },
    },
    {
      label: '手机号',
      prop: 'mobile',
      comName: 'input',
      props: {
        placeholder: '请输入手机号',
      },
    },
    {
      label: '执行时间',
      prop: 'date',
      comName: 'date',
      props: {
        type: 'daterange',
      },
    },
  ],
});

subsidyTaskGetById(Number(id)).then((res: any) => {
  if (res) {
    data.detailData = res;
    data.detailData.targetType = data.detailData.targetType.toString();
    optionsS.treeData = data.detailData.targetTree;
  }
});

const getData = (page: any, search: any) => {
  let form: any = search.ruleForm;
  if (
    search.ruleForm &&
    search.ruleForm.date &&
    search.ruleForm.date.length > 1
  ) {
    form.startTime = `${search.ruleForm.date[0]} 00:00:00`;
    form.endTime = `${search.ruleForm.date[1]} 23:59:59`;
  } else {
    form.startTime = '';
    form.endTime = '';
  }
  form.orderId = id;
  pagingExecuteRecord(form, page).then((res: any) => {
    if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
      page.pageNo--;
      getData(page, search);
      return;
    }
    nextTick(() => {
      tableRef.value.setTable({
        total: res.totalCount,
        table: res.dataList,
      });
    });
  });
};
</script>
